<template>
    <div class="add-invitation-page">
        <el-card shadow="never">
            <el-form
                :model="form"
                label-position="right"
                label-suffix=":"
                label-width="150px"
                ref="form"
                :rules="rules">
                <el-form-item label="管理员名称" prop="name">
                    <el-input
                    class="input-width"
                    v-model="form.name"
                    placeholder="请输入管理员名称"></el-input>
                </el-form-item>
                <el-form-item label="管理员账号:" prop="account">
                    <el-input
                    class="input-width"
                    v-model="form.account"
                    placeholder="请输入管理员账号"></el-input>
                </el-form-item>
                <el-form-item label="管理员密码:" prop="plain_psw">
                    <el-input
                    class="input-width"
                    v-model="form.plain_psw"
                    show-password
                    placeholder="请输入管理员密码"></el-input>
                </el-form-item>
                <el-form-item label="权限列表" v-if="this.id != 1">
                    <el-checkbox-group v-model="form.permission_list">
                        <el-checkbox v-for="(v, i) in permissionOptions"
                            :label="v.id" :key="i">{{ v.name }}</el-checkbox>
                    </el-checkbox-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onClickConfirm()">保 存</el-button>
                </el-form-item>
            </el-form>
        </el-card>
    </div>
</template>

<script>
import AesCrypt from '@/helpers/AesCrypt';

export default {
    data() {
        return {
            posting: false,
            form: {
                account: '',
                name: '',
                permissions: '',
                permission_list: [],
                plain_psw: '',
            },
            id: this.$route.params.id,
            rules: {
                name: [
                    { required: true, message: '管理员名称不能为空', trigger: 'blur' },
                ],
                account: [
                    { required: true, message: '账号不能为空', trigger: 'blur' },
                ],
                plain_psw: [
                    { required: true, message: '密码不能为空', trigger: 'blur' },
                ],
            },
            permissionOptions: [],
        };
    },
    methods: {
        onClickConfirm() {
            this.$refs.form.validate((valid) => {
                if (!valid) return;
                this.posting = true;
                let apiText = 'post';
                let url = 'administrator';
                let message = '新增成功';
                this.form.permissions = JSON.stringify(this.form.permission_list);
                if (this.id) {
                    apiText = 'put';
                    url = `administrator/${this.id}`;
                    message = '编辑成功';
                }
                API[apiText](url, this.form).then(() => {
                    this.posting = false;
                    $ele.$message.success(message);
                    this.$router.go(-1);
                }).finally(() => this.posting = false);
            });
        },
        fetchData() {
            if (this.id) {
                API.get(`administrator/${this.id}`).then(res => {
                    for (const i of Object.keys(this.form)) {
                        if (res[i]) this.form[i] = res[i];
                    }
                    this.form.plain_psw = this.showPlainPwd(this.form.plain_psw);
                    if (res.permissions) {
                        this.form.permission_list = JSON.parse(res.permissions);
                    } else {
                        this.form.permission_list = [];
                    }
                });
            }
        },
        fetchPermissionData() {
            let menus = [];
            const routes = [];
            if (this.$router.options.routes && this.$router.options.routes.length) {
                const menuList = this.$router.options.routes;
                for (const item of menuList) {
                    if (item.path === '/') menus = item.children;
                }

                for (const item of menus) {
                    if (item.meta && item.meta.permission_id) routes.push(item.meta);
                }
            }
            API.get('permission/list').then((res) => {
                const data = res;
                for (const item of data) {
                    for (const val of routes) {
                        if (item.id === val.permission_id) item.name = val.title;
                    }
                }
                this.permissionOptions = data;
            });
        },
        showPlainPwd(plainPsw) {
            return plainPsw ? new AesCrypt().decryptCBC(plainPsw) : '';
        },
    },
    mounted() {
        this.fetchData();
        this.fetchPermissionData();
    },
};
</script>

<style lang="scss" scpoed>
.add-invitation-page {
    .avatar-uploader {
        min-width: 150px;
        min-height: 150px;
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409eff;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        min-width: 150px;
        min-height: 150px;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .avatar {
        min-width: 150px;
        min-height: 150px;
        display: block;
        max-width: 200px;
    }
}
</style>
